<template>
    <div class="bottom-dialog" :class="{ 'show': isVisible, [`type-${type}`]: true }">
        <div class="dialog-content">
            <div v-show="type === 1" class="info-dialog" key="info">
                <h3>添加1231312选项</h3>
                <h3>添加1231312选项</h3>
                <h3>添加1231312选项</h3>
            </div>
            <div v-show="type === 2" class="time-dialog" key="time">
                <h1 class="time">{{ currentTime }}</h1>
                <div class="date">{{ fullDate }}</div>
                <hr class="divider" />
                <div class="calendar">
                    <div class="weekdays">
                        <span v-for="day in weekdays" :key="day">{{ day }}</span>
                    </div>
                    <div class="days">
                        <span v-for="day in days" :key="day.date"
                            :class="{ 'current': day.isCurrent, 'empty': !day.date }">
                            {{ day.date }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, defineExpose } from 'vue';

const props = defineProps({
    isVisible: Boolean,
    type: Number
});

const emit = defineEmits(['close', 'shutdown', 'restart', 'sleep']);

const currentTime = ref('');
const currentDate = ref('');

const fullDate = computed(() => {
    const now = new Date();
    const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    return `${weekdays[now.getDay()]} ${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`;
});

const updateDateTime = () => {
    const now = new Date();
    currentTime.value = now.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
};

let timer;

onMounted(() => {
    updateDateTime();
    timer = setInterval(updateDateTime, 1000);
});

onUnmounted(() => {
    clearInterval(timer);
});

const weekdays = ['日', '一', '二', '三', '四', '五', '六'];

const days = computed(() => {
    const now = new Date();
    const currentYear = now.getFullYear();
    const currentMonth = now.getMonth();
    const currentDate = now.getDate();

    const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
    const firstDayOfMonth = new Date(currentYear, currentMonth, 1).getDay();

    const days = [];

    // 添加上个月的天数
    for (let i = 0; i < firstDayOfMonth; i++) {
        days.push({ date: '', isCurrent: false });
    }

    // 添加当前月的天数
    for (let i = 1; i <= daysInMonth; i++) {
        days.push({ date: i, isCurrent: i === currentDate });
    }

    // 确保总天数是7的倍数，以保持整齐的网格布局
    while (days.length % 7 !== 0) {
        days.push({ date: '', isCurrent: false });
    }

    return days;
});
//daochuge shijian
defineExpose({ currentTime });

</script>

<style scoped lang="less">
.bottom-dialog {
    position: fixed;
    bottom: -600px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--thisTheme);
    color: var(--thisText);
    border-radius: 10px;
    padding: 20px;
    transition: all 0.3s ease, width 0.3s ease, height 0.3s ease, bottom 0.3s ease;
    opacity: 0;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px var(--thisShadow);
    overflow: hidden;

    &.show {
        bottom: 50px;
        opacity: 1;
    }

    &.type-1 {
        width: 220px;
    }

    &.type-2 {
        width: 320px;
        border-radius: 20px;
    }
}

.dialog-content {
    width: 100%;
    transition: all 0.3s ease;
}

.info-dialog {
    display: flex;
    flex-direction: column;
    gap: 12px;

    button {
        background-color: var(--thisHover);
        color: var(--thisText);
        border: none;
        padding: 12px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
        font-size: 1.1em;

        &:hover {
            background-color: var(--thisHover);
            opacity: 0.8;
        }
    }
}

.time-dialog {
    text-align: center;

    .time {
        font-size: 3.8em;
        font-weight: 300;
        margin: 0 0 8px 0;
    }

    .date {
        font-size: 1.3em;
        font-weight: 400;
        opacity: 0.8;
        margin-bottom: 12px;
    }

    .divider {
        border: none;
        border-top: 1px solid var(--thisText);
        opacity: 0.2;
        margin: 12px 0;
    }
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
    transform: translateY(20px);
}

.fade-enter-to,
.fade-leave-from {
    opacity: 1;
    transform: translateY(0);
}

.calendar {
    user-select: none; //蹦年选中

    .weekdays {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        margin-bottom: 12px;

        span {
            font-size: 0.9em;
            opacity: 0.7;
            text-align: center;
        }
    }

    .days {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 10px;

        span {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 34px;
            width: 34px;
            font-size: 1em;
            border-radius: 50%;
            margin: auto;

            &.current {
                background: var(--thisGradient);
                color: white;
                background-clip: content-box;
                padding: 2px;
            }

            &.empty {
                visibility: hidden;
            }
        }
    }
}
</style>